<template>
    <el-card class="login-container">
        <el-form-item>
            <h4>用户注册</h4>
        </el-form-item>
        <el-form-item>
            昵称：<el-input class="custom-input" v-model="user.nickName"  placeholder="请输入" /><br/>
            账号：<el-input class="custom-input" v-model="user.loginName" style="width: 240px" placeholder="请输入" /><br/>
            密码：<el-input class="custom-input" show-password="true" v-model="user.loginPwd" style="width: 240px" placeholder="请输入" /><br/>
            头像：<input type="file" class="custom-input" @change="chooseImg" style="width: 240px" placeholder="请选择" /><br/>
        </el-form-item>
            <el-button class="cus-button" type="primary" @click="regUser">注册</el-button>
    </el-card>
</template>

<script>
import axios from "../plugins/axios.js";
import qs from 'qs';
export default{
    data(){
        return {
            user:{
                nickName:'',
                loginName:'',
                loginPwd:'',
            },
            imgfile:null
        }
    },
    methods:{
        chooseImg:function(e){
            this.imgfile = e.target.files[0];
        },
        regUser: async function(){
            var formdata = new FormData();
            formdata.append('imgfile',this.imgfile);
            formdata.append('nickname',this.user.nickName);
            formdata.append('loginname',this.user.loginName);
            formdata.append('loginpwd',this.user.loginPwd);

            //使用qs工具包转化字符串或直接传入对象（要求data中与对象的成员名字相同）
            var resp = await axios.post(
                'http://localhost:9000/user/reg', formdata
                ,{headers:{'Content-Type':'multipart/form-data'}}
            );
            var u = resp.data;
            if(u.code===2000){
                alert(u.data.nickName+u.msg);
                this.$router.push("/login")
            }
        }
    }
}
</script>

<style scoped>
    .login-container {
        background-color: rgb(255, 255, 255, 0.2);
        padding: 20px;
        border-radius: 10px;
        border: 0;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        width: 500px;
        margin: 150px auto; /* 居中显示 */
        transition: transform 0.3s ease-in-out;
    }

    .login-container:hover {
        transform: scale(1.05);
    }

    .login-container h4 {
        margin-bottom: 20px;
        text-align: center;
        font-size: 25px;
    }
    .custom-input {
        margin: 10px;
        width: 240px;
    }
    .cus-button {
        margin-top: 10px;
    }

</style>